<template>
  <swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
    <div class="swiper-pagination" slot="pagination" v-if="pagination"></div>
    <slot name="swiper-slide"></slot>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

export default {
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          paginationClickable: true,
        },
        autoplay: {
          autoplay: this.play, //自动播放
          delay: 3000, //自动切换的时间间隔，单位ms
          disableOnInteraction: !this.play, //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
        },
        loop: true,
        on: {
          click: (e) => {
            this.$emit("handleSwiperBtn", e.path[0].getAttribute("data-title"));
          },
        },
        // Some Swiper option/callback...
      },
    };
  },
  props: {
    pagination: {
      type: Boolean,
      default: false,
    },
    play: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(3, 1000, false);
  },
  // mounted() {
  //   var mySwiper = new Swiper(".swiper-container", {
  //     autoplay: true,
  //     /* ... */
  //   });
  // },
};
</script>
<style lang="less" scoped>
.my-swiper {
  position: relative;
  .swiper-pagination {
    position: absolute;
    width: 100%;
    height: 20px;
  }
}
</style>